<template>
  <ul>
    <li v-for="i in data" :key="i">
      <el-image class="img el-avatar" fit="contain"></el-image>
      <span :style="{ backgroundColor: bgcThem }">王一 · 组员</span>
    </li>
  </ul>
</template>

<script setup lang="ts">
import { useCommon } from '@/pages/topic/composables/common.ts'

defineProps<{
  data: any[]
}>()

const { bgcThem } = useCommon()
</script>

<style scoped lang="scss">
ul {
  display: flex;
  justify-content: space-between;
  li {
    width: 187px;
    height: 220px;
    position: relative;
    cursor: pointer;
    overflow: hidden;
    &:hover {
      span {
        bottom: 0;
      }
    }

    .img {
      width: 100%;
      height: 100%;
    }
    span {
      position: absolute;
      left: 0;
      bottom: -62px;
      display: block;
      height: 62px;
      width: 100%;
      text-align: center;
      line-height: 62px;
      color: #fff;
      font-size: 20px;
      transition: bottom 0.3s;
    }
  }
}
</style>
